<template>
    <div>
        <ButtonGroup>
            <Button type="primary" @click="modal1 = true,czTitle='添加数据'">添加数据</Button>
            <Modal
                v-model="modal1"
                :title="czTitle"
                @on-ok="ok(paramsId)"
                @on-cancel="cancel">
                <Form :model="formRight" label-position="right" :label-width="100">
                    <FormItem label="姓名">
                        <Input v-model="formRight.name"></Input>
                    </FormItem>
                    <FormItem label="年龄">
                        <Input v-model="formRight.age"></Input>
                    </FormItem>
                    <FormItem label="性别">
                        <Input v-model="formRight.sex"></Input>
                    </FormItem>
                </Form>
            </Modal>
            <Button type="error" @click="monRemove">批量删除</Button>
        </ButtonGroup>
        <Input v-model="filter.name">
            <Button slot="append" icon="ios-search" @click="Search"></Button>
        </Input>
        <Table border :columns="columns" :data="comments" @on-selection-change="onSelectionChange"></Table>
        <Page :total="filter.total" @on-change="onChange" @on-page-size-change="ps" :page-size="filter.limit" show-sizer></Page>
    </div>
</template>    
<script>
import {bass} from "./common/Bass"
    export default {
        mixins:[bass],
        data () {
            return {
                model:'users',
                // modal1: false,
                // title:"添加数据",
                // paramsId:'',
                formRight: {
                    name: '',
                    age: '',
                    sex: ''
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '用户',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '性别',
                        key: 'sex'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.czTitle = "修改数据";
                                            this.modal1 = true,
                                            this.paramsId = params.row._id.toString()
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                // comments:[],
                // filter:{
                //     total:0,
                //     limit:5,
                //     page:1,
                //     name:''
                // },
                // ids:[]
            }
        },
        // methods: {
        //     // 增加数据
        //     ok (paramsId) {
        //         if(!paramsId){
        //           this.axios({
        //                 method:'post',
        //                 url:"http://localhost:3000/users/data",
        //                 data:this.formRight
        //             }).then(res=>{
        //                 this.$Message.info('添加成功');
        //                 this.getListData()
        //             })  
        //         }else{//修改数据
        //             this.axios({
        //                 method:'put',
        //                 url:`http://localhost:3000/users/data/${paramsId}`,
        //                 data:this.formRight
        //             }).then(res=>{
        //                 this.$Message.info('修改成功');
        //                 this.getListData()
        //             })  
        //         }
        //     },
        //     cancel () {
        //         this.$Message.info('取消操作');
        //     },
        //     // 删除数据
        //     remove (params) {
        //         this.$Modal.confirm({
        //             title: '删除',
        //             content: '<p>你确定删除这条数据</p>',
        //             onOk: () => {
        //                 this.axios({
        //                     method:'delete',
        //                     url:`http://localhost:3000/users/data/${params.row._id}`
        //                 }).then(res=>{
        //                     this.$Message.info('删除成功');
        //                     this.getListData()
        //                 })
        //             },
        //             onCancel: () => {
        //                 this.$Message.info('取消删除');
        //             }
        //         });
        //     },
        //     onSelectionChange(selection){
        //         var ids=[];
        //         for(let i=0;i<selection.length;i++){
        //             ids.push(selection[i]._id)
        //         }
        //         this.ids=ids
        //     },
        //     monRemove(){
        //         this.$Modal.confirm({
        //             title: '批量删除',
        //             content: '<p>你确定删除这些数据</p>',
        //             onOk: () => {
        //                 this.axios({
        //                     method:'post',
        //                     url:"http://localhost:3000/users/data/removes",
        //                     data:{
        //                         ids:this.ids.toString()
        //                     }
        //                 }).then(res=>{
        //                     this.$Message.info('删除成功');
        //                     this.getListData()
        //                 })
        //             },
        //             onCancel: () => {
        //                 this.$Message.info('取消删除');
        //             }
        //         });
        //     },
        //     // 列表显示
        //     getListData(){
        //         this.axios({
        //             method: 'post',
        //             url: 'http://localhost:3000/users/list',
        //             data: this.filter
        //         }).then(res=>{
        //             // console.log(res.data),
        //             this.filter.total=res.data.total,
        //             this.comments=res.data.rows;
        //         })
        //     },
        //     onChange(page){
        //         this.filter.page=page,
        //         this.getListData()
        //     },
        //     ps(pageSize){
        //         console.log(this.filter.pageSize),
        //         this.filter.limit=pageSize,
        //         this.getListData()
        //     },
        //     Search(){
        //         this.getListData()
        //     }
        // },
        // mounted(){
        //     this.getListData()
        // }
    }
</script>